<!-- Trigger the modal with a button -->

<!-- Modal -->
<div id="createContainer" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Create a Container</h4>
            </div>
            <div class="modal-body">

                <p>Please the enter the name for the Container, conforming the following naming rules:</p>
                <ol class="text-info">
                    <li>Container names must start with a letter or number, and can contain only letters, numbers, and the dash (-) character.</li>
                    <li>Every dash (-) character must be immediately preceded and followed by a letter or number; consecutive dashes are not permitted in container names.</li>
                    <li>All letters in a container name must be lowercase.</li>
                    <li>Container names must be from 3 through 63 characters long.</li>
                </ol>
                <form class="" action="#" onsubmit="createContainer()">
                    <div class="form-group">
                        <label>Name</label>
                        <input class="form-control container-name" name="name" type="text" placeholder="Enter the name of the container">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="createContainer()">Create</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>